<template>
    <div style="height: 100%; position: relative">
        <div style="position: relative">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                    :key="item.name"
                    v-for="item in tabs"
                    :label="item.label"
                    :name="item.name"
                >
				<component v-bind:is="item.component" :abc="1" @addtab="addTab"></component>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- <router-view></router-view> -->
    </div>
</template>
<script>
// import listTable from './brand-list-table.vue'
export default {
    data() {
        return {
            activeName: 'tab-list',
            tabs: [
                { label: '品牌列表', name: 'tab-list', component: ()=>import('./brand-list-table.vue') }
            ],
            show_slide_box: false
        };
    },
    created() {
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
            console.log(tab.name, tab.path);
            this.activeName = tab.name;
            this.$router.push(tab.$attrs.path)
        },
        addTab(label,name,component) {
            this.tabs.push({ label, name, component});
            this.activeName = name;
        },
        removeTab(targetName) {
            let tabs = this.tabs;
            let activeName = this.activeName;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.activeName = activeName;
            this.tabs = tabs.filter(tab => tab.name !== targetName);
        }

    }
};
</script>
<style scoped>
.admin-control-add {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
</style>